
import { useEffect, useState } from 'react'

import {getBannerList, getProList} from '../api/home'

// useSelector: 是用来获取全局状态的方法
// useDispatch: 是用来触发修改全局状态函数的方法
import { useSelector, useDispatch } from 'react-redux'

// 导入修改全局状态的方法
import { changeBannerList,changeProList } from '../store/modules/home'

const Home = ()=>{
    // 创建 dispatch 方法
    const dispatch = useDispatch()

    // useState 该 hooks 是用来定义一个响应式数据(状态)用的
    // [数据源,修改数据的方法]
    // const [bannerList,setBannerList] = useState([])
    // const [proList, setProList] = useState([])

    // 获取全局状态
    const bannerList = useSelector(state => state.home.bannerList)
    const proList = useSelector(state => state.home.proList)

    // useEffect 可以理解为类组件中的生命周期函数，可以模拟 挂载，更新，和卸载
    useEffect(()=>{
        // console.log('运行和更新都会被执行');


        getBannerList().then(res => {
            console.log(res.data.data);
            // setBannerList(res.data.data)
            // 请求数据成功之后，会修改 bannerList 数组
            // 当 bannerList 数组发生改变，就可以监听到组件变化更新
            // 组件但凡更新了，那么我的组件肯定会重新执行渲染
            // 重新执行渲染的时候又会重新执行 useEffect
            // 此时又会发送数据请求，请求结束后又会给 bannerList 赋值
            // 赋值完成后又监听到了改变，所以形成了循环



            // 请求成功之后将数据放在全局状态管理中
            dispatch(changeBannerList(res.data.data))
        })

        getProList().then(res => {
            // console.log(res.data.data);

            // setProList(res.data.data)

            // 请求成功之后将数据放在全局状态管理中
            dispatch(changeProList(res.data.data))
        })
        
        // useEffect 第二个参数是依赖项
        // 只有依赖项发送改变的时候才会重新执行 useEffect
        // 设置一个 [] 就是什么都不依赖，那么该 useEffect 只会挂载阶段执行一次
    }, [])

    return (<div>
        
        {
            bannerList && bannerList.map(item => {
                return <img src={item.img} key={item.bannerid} style={{width: 150}} />
            })
        }
        
        <ol>
            {
                proList && proList.map(item => <li key={item.proid}>{item.proname}</li>)
            }
        </ol>
    </div>)
}

export default Home